import { ImageTextCard, AbstractNavigator, WithMargins } from "@/components";
import { colors } from "@/data/shared/colors";
import { getTalks, useApplicationInfo } from "@/store/applicationDataContext";
import { View } from "@tarojs/components";
import { useEffect } from "react";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";
import { TalkShape } from "@/data/talks/talkTypes";
import { useDidShow } from "@tarojs/taro";
import { DiscoverTabsEnum } from "@/pages/discover/discoverData";
import style from "./index.module.scss";

export default function C16TalkListing() {
  const { applicationState, dispatch } = useApplicationInfo();
  const { talks } = applicationState;

  useEffect(() => {
    if (!applicationState.talks.length) {
      getTalks(dispatch);
    }
    initSharing();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  useEffect(() => {
    sendAction(ActionNames.TalkImpression);
  }, []);

  const onItemClick = (talk: TalkShape) => {
    sendAction(ActionNames.TalkListClick, {
      [ActionKeys.TalkType]: talk.talkTypeName,
      [ActionKeys.TalkName]: talk.name,
      [ActionKeys.TalkDate]: talk.schedulingDate,
    });
  };

  useDidShow(() => {
    initSharing();
  });

  const initSharing = () => {
    if (dispatch) {
      dispatch({
        type: "DISCOVER_TAB",
        data: {
          tab: DiscoverTabsEnum.Talks,
        },
      });
    }
  };

  return (
    <View className={style["talks-wrapper"]}>
      <WithMargins>
        <View className={style["talks-content"]}>
          {talks.map((talk) => (
            <AbstractNavigator
              key={talk.id}
              url={`pages/talk-detail/index?id=${talk.id}`}
              onClick={() => onItemClick(talk)}
            >
              <ImageTextCard
                imagePath={talk.cover}
                type="talklisting-card"
                tag={talk.talkTypeName}
                themeColor={colors.colorConversation}
                title={talk.name}
                dateRange={talk.schedulingDate}
              />
            </AbstractNavigator>
          ))}
        </View>
      </WithMargins>
    </View>
  );
}
